<template>
  <div class="scheme-manage-index sub-margin">
    <!-- <div class="sub-page-title">
      考核管理
    </div> -->
    <div class="content" v-if="!isLoading">
      <Empty v-if="showEmpty" @create="addCheckScheme"></Empty>
      <template v-if="!showEmpty">
        <div class="right-con">
          <AssessTable
            :defaultYear="defaultYear"
            :yearOptions="yearOptions"
            :source="tableList"
            @add-scheme="addCheckScheme"
            @search-list="searchData"
            @edit-scheme="editScheme"
            @launch-scheme="launchScheme"
            @del-scheme="delScheme">
            <pagination
              slot="pagination"
              :page-size.sync="pageParam.pageSize"
              :total="pageParam.totalSize"
              :current-page.sync="pageParam.currentPage"
              :pageSizes="[10, 20]"
              layout="slot,prev, pager, next, sizes, jumper"
              @change="onPageChange"></pagination>
          </AssessTable>
        </div>
      </template>
    </div>
    <div class="content" v-if="isLoading">
      <!-- <Loading :isLoading="isLoading"></Loading> -->
    </div>
    <AddStartDialog
      :visible.sync="showDialog"
      :info="curScheme"
      @submit="onModuleAdd"
      :type="dialogType"
      :yearOptions="yearOptions"></AddStartDialog>
  </div>
</template>

<script>
import Empty from './components/Empty.vue'
import pagination from '@com/pagination'
import AssessTable from './components/AssessTable'
import AddStartDialog from './components/AddStartDialog.vue'
// import Loading from '@com/Loading'
import { cloneDeep } from 'lodash'
import { getYearList, getAssessDataList, createAssessTask, delAssessTask, saveAssessData } from '@apis/assessManage.js'

export default {
  name: 'SchemeManageIndex',
  components: { Empty, pagination, AssessTable, AddStartDialog },
  data() {
    return {
      pageParam: {
        currentPage: 1,
        pageSize: 10,
        totalSize: 0,
      },
      loading: false,
      showDialog: false,
      curScheme: {},
      dialogType: '',
      yearOptions: [],
      gradeYear: '',
      tableList: [],
      defaultYear: '',
      searchList: false,
      isLoading: false,
      keywords: '',
    }
  },
  computed: {
    showEmpty() {
      // return true
      return !this.searchList && this.tableList.length === 0
    },
  },
  created() {
    this.isLoading = true
    this.searchList = false
    this.getYearList()
  },
  methods: {
    searchData(obj) {
      this.searchList = true
      this.pageParam.currentPage = 1
      this.pageParam.pageSize = 10
      this.gradeYear = obj.gradeYear
      this.keywords = obj.title || ''
      this.initData(obj)
    },
    onPageChange(obj) {
      this.pageParam.currentPage = obj.pageNumber
      this.pageParam.pageSize = obj.pageSize
      this.initData()
    },
    addCheckScheme() {
      this.dialogType = 'add'
      this.curScheme = {}
      this.showDialog = true
    },
    async editScheme(obj) {
      this.$router.push({
        name: 'JXGL_ASSESS_PAGE',
        params: {
          id: obj.id,
        },
      })
    },
    async launchScheme(obj) {
      this.dialogType = 'start'
      this.curScheme = cloneDeep(obj)
      this.showDialog = true
    },
    async delScheme(obj) {
      console.log(obj)
      const { status } = await delAssessTask(obj.id)
      if (status === 200) {
        this.$message.success('删除成功')
        this.pageParam.currentPage = 1
        this.pageParam.pageSize = 10
        this.initData()
      }
    },
    async onModuleAdd(obj) {
      if (this.dialogType === 'add') {
        const { status } = await createAssessTask(obj)
        if (status === 200) {
          this.$message.success('新建成功')
          this.pageParam.currentPage = 1
          this.initData()
        }
      } else {
        if (this.dialogType === 'start' && obj.status === '0') {
          const { status } = await saveAssessData(obj)
          if (status === 200) {
            this.$message.success('保存成功')
            this.pageParam.currentPage = 1
            this.initData()
          }
        } else {
          this.$confirm('确定使用当前考核任务发起考核吗?', '提示', {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning',
          })
            .then(async () => {
              const { status, data } = await saveAssessData(obj)
              if (status === 200 && data.status === 0) {
                this.$message.success('开启成功')
                this.pageParam.currentPage = 1
                this.initData()
              } else {
                this.$alert(data.tips, '提示', {
                  confirmButtonText: '确定',
                  type: 'warning',
                  callback: () => {},
                })
              }
            })
            .catch(() => {})
        }
      }
    },
    getYearList() {
      getYearList()
        .then(res => {
          if (res.status === 200) {
            this.yearOptions = res.data.data
            this.defaultYear = ''
            this.gradeYear = ''
            this.initData()
          }
        })
        .catch(() => {
          this.isLoading = false
        })
    },
    initData() {
      const params = {
        status: '',
        tenatId: '',
        year: this.gradeYear,
        keywords: this.keywords,
      }
      getAssessDataList(params, this.pageParam.currentPage, this.pageParam.pageSize)
        .then(res => {
          this.isLoading = false
          if (res.status === 200) {
            this.tableList = res.data.content
            this.pageParam.totalSize = res.data.totalSize
          }
        })
        .catch(() => {
          this.isLoading = false
        })
    },
  },
}
</script>
<style lang="scss" scoped>
@import '@styles/layout.scss';

.scheme-manage-index {
  height: 100%;
  display: flex;
  flex-direction: column;
  .sub-page-title {
    position: relative;

    .guide-step {
      position: absolute;
      right: 0;
      bottom: 10px;
      padding: 0;
    }
  }

  .content {
    flex: 1;
    // display: flex;
    // align-items: stretch;
    padding: 20px 0;

    .tip-txt {
      p {
        text-align: center;
      }

      .el-button {
        font-size: 16px;
      }

      .el-button + .el-button {
        margin-left: 0;
      }
    }

    .left-con {
      width: 300px;
      padding: 0 20px;
      overflow: auto;
      position: relative;
      border-right: 1px solid #e4eaf0;
    }

    .right-con {
      height: 100%;
    }
  }
}
</style>
